<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>表单元素绑定..</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test">
    <span>message is {{message}}</span>
    <br/>
    <input type="text" v-model="message" placeholder="edit me">

    <hr/>
    <label for="checkbox1">{{checked}}</label>
    <input type="checkbox" id="checkbox1" v-model="checked"/>

    <hr/>
    多选框：
    <input type="checkbox" id="ck1" v-model="ckNames" value="ck1"/>
    <label for="ck1">ck1</label>
    <input type="checkbox" id="ck2" v-model="ckNames" value="ck2"/>
    <label for="ck2">ck2</label>
    <input type="checkbox" id="ck3" v-model="ckNames" value="ck3"/>
    <label for="ck3">ck3</label>
    <input type="checkbox" id="ck4" v-model="ckNames" value="ck4"/>
    <label for="ck4">ck4</label>
    <br/>
    <span>checknames:{{ckNames | json}}</span>

    <hr/>
    单选框:
    <input type="radio" id="radio1" v-model="radios" value="radio1" />
    <input type="radio" id="radio2" v-model="radios" value="radio2"/>
    <br/>
    <b><span>radios: {{radios}}</span></b>

    <hr/>
    下拉选择框:
    <select v-model="selected">
        <option selected>1111</option>
        <option>2222</option>
        <option>333</option>
    </select>
    <br/>
    <b><span>selected: {{selected}}</span></b>
    <br/>
    多选框：

    <select v-model="selected2" multiple>
        <option selected>1111</option>
        <option>2222</option>
        <option>333</option>
    </select>
    <br/>
    <b><span>selected: {{selected2 }}</span></b>

    <br/>
    动态多选框：

    <select v-model="selected3" multiple>
        <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
    </select>
    <br/>
    <b><span>selected: {{selected3 }}</span></b>

    <hr/>
    vm-model 绑定value：
    <input
            type="checkbox"
            v-model="toggle"
            v-bind:true-value="a"
            v-bind:false-value="b">

    <hr/>
    lazy:在默认情况下，v-model 在input 事件中同步输入框值与数据，
    可以添加一个特性 lazy，从而改到在 change 事件中同步：
    <input v-model="msg" lazy  /><!-- TODO 不起效果-->

    <hr/>
    数字输入框： <input v-model="number" number id="num1" /> <!-- TODO 不起效果-->
    <label for="num1">{{number}}</label>

    <hr/>
    debounce:延时
    <input v-model="debounce" id="de1" debounce="500"/>
    <label for="de1">{{debounce}}</label>




</div>


<script type="text/javascript">


    var vm = new Vue({
        el: "#div_test",
        data: {
            ckNames: [],
            options: [
                  {text: "类型一", value: "va1"}
                , {text: "类型二", value: "va2"}
                , {text: "类型三", value: "va3"}
            ],
            a:1,
            b:2,
            msg:"hello world"
        },
        methods: {}
    })
    console.log("toggle::::"+vm.toggle);




</script>

</body>
</html>